define(function (require) {

    var InputControl = require('esui/InputControl');
    var Panel = require('esui/Panel');
    var u = require('underscore');
    var $ = require('jquery');
    var lib = require('esui/lib');
    var esui = require('esui/main');
    var eoo = require('eoo');

    var exports = {};

    var PriceImageList = eoo.create(
        InputControl,
        {
            /**
             * 控件类型，始终为`"PriceImageList"`
             *
             * @type {string}
             * @override
             */
            type: 'PriceImageList',

            initOptions: function (options) {
                var properties = {};
                options.rawValue = options.rawValue || [];
                u.extend(properties, options);

                properties.name = properties.name || this.main.getAttribute('name');
                this.setProperties(properties);
            },

            initEvents: function() {
                this.$super(arguments);

                var me = this;

                // 删除
                $(this.main).on(
                    'click',
                    function (event) {
                        var target = event.target;
                        if ($(target).is('.close-button')) {

                            // 找到用户点击了哪个item上的删除按钮
                            var itemClass = me.helper.getPartClassName('item');
                            deleteIndex = $(me.main).find('.' + itemClass).index(target.parentNode);

                            if (deleteIndex >= 0) {
                                var rawValue = me.rawValue.slice(0);
                                var removedItem = rawValue.splice(deleteIndex, 1);
                                me.fire('remove', removedItem);
                                me.setProperties({rawValue: rawValue});
                            }
                        }
                    }
                )
            },

            repaint: require('esui/painters').createRepaint(
                InputControl.prototype.repaint,
                {
                    name: ['rawValue'],
                    paint: function (imageList, rawValue) {
                        if (!u.isArray(rawValue)) {
                            return;
                        }
                        renderImages.call(imageList, rawValue);
                    }
                }
            ),

            addItem: function(item) {
                // 这里要保证setProperties时rawValue前后值不同，这里复制一份
                var rawValue = this.rawValue.slice(0);
                rawValue.push(item);
                this.setProperties({rawValue: rawValue});
            },

            getResult: function () {
                var result = [];
                var itemClass = this.helper.getPartClassName('item');
                $('.' + itemClass).each(
                    function (index, itemElem) {
                        var $itemElem = $(itemElem);
                        result.push(
                            {
                                pic: $itemElem.find('img').attr('src'),
                                price: $itemElem.find('input:eq(0)').val(),
                                oldPrice: $itemElem.find('input:eq(1)').val()
                            }
                        );
                    }
                );
                return result;
            },

            dispose: function() {
                $(this.main).off('click');
                this.$super(arguments);
            }
        }
    );

    var tpl = [
        '<div class="${classes}">',
        '   <img src="${pic}" />',
        '   <p>',
        '       <span class="ml10 mr10">现价</span>',
        '       <esui-text-box data-ui-raw-value="${price}" data-ui-width="120"></esui-text-box>',
        '   </p>',
        '   <p>',
        '       <span class="ml10 mr10">原价</span>',
        '       <esui-text-box data-ui-raw-value="${oldPrice}" data-ui-width="120"></esui-text-box>',
        '   </p>',
        '   <div class="ui-icon close-button"></div>',
        '</div>'
    ].join('');

    function renderImages(rawValue) {
        this.main.innerHTML = '';
        for (var i = 0; i < rawValue.length; i++) {
            renderImage.call(this, rawValue[i], i);
        }
        esui.init(this.main);
    }

    function renderImage(item, index) {
        item.price = item.price || '';
        item.oldPrice = item.oldPrice || '';
        $(this.main).append(
            lib.format(
                tpl,
                u.extend(
                    {
                        classes: this.helper.getPartClassName('item'),
                        index: index
                    },
                    item
                )
            )
        );
    }

    esui.register(PriceImageList);
    return PriceImageList;
});
